<script lang="tsx">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'Button',
})
export default class extends Vue {
  render() {
    return (
      <button class='my-button'>
        { this.$slots.default }
      </button>
    )
  }
}
</script>

<style lang="scss" scoped>
$button-height: 34px;
$bg-color: rgb(255, 255, 255);
$bg-hover-color: rgb(230, 230, 230);
$border-color: rgb(204, 204, 204);
$active-shadow-color: rgba(0, 0, 0, .1);

.my-button {
  height: $button-height;
  background-color: $bg-color;
  border: 1px solid $border-color;
  border-radius: 5px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: normal;
  color: #333;
  cursor: pointer;
  transition: all 200ms;
  &:hover {
    background-color: $bg-hover-color;
  }
  &:active {
    box-shadow: 0 0 20px $active-shadow-color inset;
  }
}
</style>
